<!DOCTYPE html>
<html>
<head>
    <title>电力拓扑图展示</title>
    <script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=utf-8">
    <meta charset="utf-8">

    <meta charset="UTF-8">
    <title>电力拓扑图[程序员视角]</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
</head>
<body>

<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
        <form>
            <div class="form-group">
                <label for="graphTopol">图json数据</label>
<!--                <input type="text" class="form-control" id="graphTopol" placeholder="请输入图json数据" >-->
                <br>
                <textarea class="form-control" id="graphTopol" placeholder="请输入图json数据" ></textarea>
            </div>
        </form>
        <button  class="btn btn-default" onclick="submit()">提交</button>
    </div>
    <div class="col-md-3"></div>
</div>
<svg width=10400 height=10800 ></svg>
<script>
    $(function (){
        alert("init")
        $.ajax({
            url: 'https://cdn.bootcss.com/jquery/3.4.1/jquery.js',
            type: 'GET',
            timeout: 1000,
            cache: false,
            success: function (data){
                alert("ok")
                $("#graphTopol").val( data)
            } //成功执行方法
        })

    });
    var marge = {top:60,bottom:60,left:60,right:60}
    var svg = d3.select("svg")    
    var nodes = [];
    var edges = [];
    var links;
    var linksText;
    var gs;
    var marker;
    var forceSimulation;
    var colorScale;

    function submit(){
        var graph = $("#graphTopol").val();
        var deviceNumber = $("#deviceNumber").val();
                       svg.selectAll("*").remove();
                       var width = svg.attr("width");  
                       var height = svg.attr("height");   
                       var g = svg.append("g").attr("transform","translate("+marge.top+","+marge.left+")");
					   console.log(graph);
                       var result = JSON.parse(graph);
                      
                       nodes = result.nodes;
                       edges = result.edges;

                       
                       colorScale = d3.scaleOrdinal()
                           .domain(d3.range(nodes.length))
                           .range(d3.schemeCategory10);

                       
                       forceSimulation = d3.forceSimulation()
                           .force("link",d3.forceLink())
                           .force("charge",d3.forceManyBody())
                           .force("center",d3.forceCenter());

                     
                       forceSimulation.nodes(nodes).on("tick",ticked);

                       
                       forceSimulation.force("link")
                           .links(edges)
                           .distance(function(d)
                                     {   
                                         return Math.ceil((Math.random()+2)*60);
                                     })

                       
                       forceSimulation.force("center").x(width/4).y(height/4);

                      
                       links = g.append("g")
                           .selectAll("line")   
                           .data(edges)  
                           .enter()
                           .append("line")
                           .attr("stroke",function(d,i)
                           {
                               return colorScale(i);  
                           })
                           .attr("stroke-width",1);   

                      
                       linksText = g.append("g")
                           .selectAll("text")
                           .data(edges)
                           .enter()
                           .append("text")
                           .text(function(d)
                                 {
                                     return ""; 
                                 })

                       
                       gs = g.selectAll(".circleText")
                           .data(nodes)
                           .enter()
                           .append("g")
                           .attr("transform",function(d,i){
                               var cirX = d.x;
                               var cirY = d.y;
                               return "translate("+cirX+","+cirY+")";
                           })
                           .call(d3.drag()  
                                     .on("start",started)   
                                     .on("drag",dragged)
                                     .on("end",ended)
                           );

                       
                       gs.append("circle")
                           .attr("r", function(d, i){
                            if(deviceNumber == d.name) {
                            return 30
                        } else {
                            return 10
                        }
                           })   
                       .attr("fill",function(d,i)
                       {
                        if(deviceNumber == d.name) {
                            return "#f05050"
                        } else {
                            return "#d3d3d3"
                        }
                       })

                       //顶点上的文字
                       gs.append("text")
                           .attr("x",-10)
                           .attr("y",-20)
                           .attr("dy",10)
                           .text(function(d)
                                 {
                                     return d.name;
                                 })

                       
                       marker=	svg.append("marker")
                           .attr("id", "resolved")
                           .attr("markerUnits","userSpaceOnUse")
                           .attr("viewBox", "0 -5 10 10")
                           .attr("refX",26)
                           .attr("refY", 0)
                           .attr("markerWidth", 6)
                           .attr("markerHeight", 6)  
                           .attr("orient", "auto")
                           .attr("stroke-width",2)
                           .append("path")
                           .attr("d", "M0,-5L10,0L0,5")
                           .attr('fill','#000000');

    }

    function ticked()
    {
        links
            .attr("x1",function(d){return d.source.x;})
            .attr("y1",function(d){return d.source.y;})
            .attr("x2",function(d){return d.target.x;})
            .attr("y2",function(d){return d.target.y;})
            .attr("marker-end", "url(#resolved)");

        linksText
            .attr("x",function(d)
            {
                return (d.source.x+d.target.x)/2;

            })
            .attr("y",function(d)
            {
                return (d.source.y+d.target.y)/2;
            });

        gs.attr("transform",function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    }

    function started(d)
    {
        if(!d3.event.active)
        {
            forceSimulation.alphaTarget(0.8).restart();
        }
        d.fx = d.x;
        d.fy = d.y;
    }

    function dragged(d)
    {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }

    function ended(d)
    {
        if(!d3.event.active)
        {
            forceSimulation.alphaTarget(0);

        }
        d.fx = null;
        d.fy = null;
    }
</script>

</body>

</html>
